<template>
  <view v-if="!isLoading" class="container b-f p-b">
    <u-navbar :is-back="true" title="活动详情" :border-bottom="false"></u-navbar>

    <u-line height="1rpx" color="#E6E6E6"></u-line>
    <view class="article-content m-top20">
      <u-parse :html="detail.content"></u-parse>
    </view>
    <view class="article-little">
      <view class="article-little__right">
        <text class="article-views f-24 col-8">{{ detail.view_time }}</text>
      </view>
    </view>
    <!-- 快捷导航 -->
    <!-- <shortcut /> -->
  </view>
</template>

<script>
// import Shortcut from '@/components/shortcut'
// import * as ArticleApi from '@/api/article'

export default {
  // components: {
  //   Shortcut
  // },
  data() {
    return {
      // 当前文章ID
      articleId: null,
      // 加载中
      isLoading: false,
      // 当前文章详情
      detail: {
        title: '文章标题',
        view_time: '2025-03-06  17:55',
        content: '富文本'
      }
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 记录文章ID
    this.articleId = options.articleId
    // 获取文章详情
    this.getArticleDetail()
  },

  methods: {
    // 获取文章详情
    getArticleDetail() {
      const app = this
      // app.isLoading = true
      //   ArticleApi.detail(app.articleId)
      //     .then(result => {
      //       app.detail = result.data.detail
      //     })
      //     .finally(() => app.isLoading = false)
    }
  },

  /**
   * 分享当前页面
   */
  onShareAppMessage() {
    const app = this
    // 构建页面参数
    const params = app.$getShareUrlParams({
      articleId: app.articleId
    })
    return {
      title: app.detail.title,
      path: '/pages/article/detail?' + params
    }
  },

  /**
   * 分享到朋友圈
   * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
   * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
   */
  onShareTimeline() {
    const app = this
    // 构建页面参数
    const params = app.$getShareUrlParams({
      articleId: app.articleId
    })
    return {
      title: app.detail.title,
      path: '/pages/article/detail?' + params
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  padding: 20rpx;
  background: #fff;
}

.article-content {
  font-size: 28rpx;
}

.article-title {
  font-weight: 600;
  font-size: 30rpx;
  color: #333333;
  line-height: 36rpx;
  padding-bottom: 10rpx;
}

.article-little {
  font-size: 24rpx;
  color: #999999;
  line-height: 48rpx;
  padding-bottom: 20rpx;
}
.article-content {
  padding: 30rpx 20rpx;
}
</style>
